<template>
	<view style="background-color: #F2F2F2 ;width: 100vw;height: 100vh;overflow-y: scroll;">
		<view style="background-color: #ffffff;padding-bottom: 8px;margin-bottom: 10px;">
			<u-tabs :list="list1" @click="click" scrollable='false' :current='roof' lineColor='#FFDA00'
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:20vw"
				:activeStyle="{ color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}"></u-tabs>
		</view>
		<view v-for="(item,index) in substance[0]" :key="index" style="margin-bottom: 9px;">
			<view class="cycle">
				<view class="cycleUp" style="margin-top: 0;margin-bottom: 5px;">
					<view class="">
						<image src="@/static/wode/yaoshi.png" mode="widthFix"
							style="width: 20px;display: flex;align-items: center;"></image>
					</view>
					<view class="">
						{{item.keyType == '0' ?'整租' : '合租'}}·{{item.keyAddress}}
					</view>
					<view style="color:#FF0000 ;font-size: 12px;" class="upRight" v-if="item.keyStatus==1">
						在门店
					</view>
					<view style="color:#FF0000 ;font-size: 12px;" class="upRight" v-if="item.keyStatus==2">
						已预约
					</view>
					<view style="color:#FF0000 ;font-size: 12px;" class="upRight" v-if="item.keyStatus==3">
						看客已拿
					</view>
					<view style="color:#FF0000 ;font-size: 12px;" class="upRight" v-if="item.keyStatus==4">
						租户已拿
					</view>
				</view>
				<view style="font-size: 12px;">
					{{item.type == '0' ? item.houseArea : item.roomArea}}㎡
				</view>
				<!-- <view class="cycleUp">
					<view class="upUp">
						看房时间
					</view>
					<view class="upRight">
						{{item.viewHouseTime}}:00
					</view>
				</view> -->
				<view class="cycleUp">
					<view class="upUp">
						房东姓名
					</view>
					<view class="upRight">
						{{item.ownerName}}
					</view>
				</view>
				<view class="cycleUp">
					<view class="upUp">
						房东电话
					</view>
					<view class="upRight">
						{{item.ownerPhone}}
					</view>
				</view>
				<view class="cycleUp">
					<view class="upUp">
						房间地址
					</view>
					<view class="upRight">
						{{item.villageName}}{{item.address}}
					</view>
				</view>
				<view class="cycleUp" v-if="item.keyType">
					<view class="upUp">
						房间密码
					</view>
					<view class="upRight">
						{{item.keyType}}
					</view>
				</view>
				<view class="pushButton">
					<button @click="nianxi(item.ownerPhone)">联系房东</button>
					<button v-if="item.keyStatus==3" @click="guihuan(item.id)">已归还</button>
				</view>
				<u-empty v-if="substance.length==0" mode="data" icon="/static/index/homeowner/history.png">
				</u-empty>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		post,
	} from '@/serve/method.js'
	onLoad(() => {
		// roof.value = option.id
		viewHouseRecord()
	})
	const nianxi = (house) => {
		uni.makePhoneCall({
			phoneNumber: house,
		});
	}
	const guihuan = (idss) => {
		let urls = "/api/user/returnKey"
		// console.log(res.data.vuex_user.userId, 9999999)
		post(urls, {
			'id': idss,
		}).then((itemss) => {
			viewHouseRecord(one.value)
		})
	}
	const viewHouseRecord = (id) => {
		uni.getStorage({
			key: 'lifeData',
			success: function(res) {
				substance.length = 0
				let urls = "/api/house/findHouseList"
				// console.log(res.data.vuex_user.userId, 9999999)
				post(urls, {
					"keyPassword": res.data.vuex_user.phonenumber,
					'keyStatus': id,
				}).then((itemss) => {
					substance.push(itemss.rows)
					console.log(substance, 9999)
				})
			},
			fail: function(res) {
				if (res.errMsg == 'getStorage:fail data not found') {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}
			}
		})
	}
	const headnavigation = ref()
	const substance = reactive([])
	const one = ref()
	// 创建响应式数据  
	const list1 = reactive([{
			name: '全部'
		},
		{
			name: '在门店'
		},
		{
			name: '已预约'
		},
		{
			name: '看客已拿'
		},
		{
			name: '租户已拿'
		}
	]);
	const roof = ref()
	// 定义方法  
	const click = (item) => {
		console.log('item', item);
		one.value = item.index
		if (one.value == 0) {
			one.value = null
		}
		viewHouseRecord(one.value)
	}
</script>
<style scoped lang="scss">
	.pushButton {
		display: flex;
		justify-content: flex-end;

		button {
			// background-color: #FFDA00;
			font-size: 12px;
			margin-right: 10px;
			margin-left: 5px;
		}
	}

	.cycle {
		width: calc(100vw - 40px);
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 10px;
		padding: 15px 10px;

		.cycleUp {
			display: flex;
			margin: 15px 0;

			.upUp {
				color: #999999;
			}

			.upRight {
				margin-left: auto;
			}
		}
	}
</style>